<template>
  <div class="create">
    <h2>添加博客</h2>
    <form v-if="!submmited">
        <label for="title" >博客标题</label>
        <input type="text" id="title" placeholder="请输入标题" v-model="title" required>
        <label for="content">博客内容</label>
        <textarea id="content" placeholder="请输入内容" v-model="content"></textarea>
        <label for="tags">博客标签</label>
        <input type="text" id="tag" placeholder="请输入标签" v-model="tag" @keydown.enter.prevent="handlekeydown()">
        <span v-for="tag in tags" :key="tag">#{{tag}}</span>
        <button @click.prevent="create" style="margin: auto; width: 100px; top: 220px;">创建</button>
    </form>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';

const title=ref('')
const content=ref('')
const tags=ref([])
const tag=ref('')
const router = useRouter();

const handlekeydown = () =>{
    if(!tags.value.includes(tag.value)){
        tags.value.push(tag.value)
        tag.value=''
    }
}

const create = async() =>{
    const data={
        id:Math.floor(Math.random()*10000),
        title:title.value,
        content:content.value,
        tags:tags.value
    }
    const res = await axios.post('http://localhost:3000/listData',data);
    console.log(res);
    if(res.status===201){
        router.push('/')
    }
}

</script>

<style scoped>
*{
    box-sizing: border-box;
}
.create{
    max-width: 100%;
    line-height: 2.5;
    margin: auto;
    background-color: antiquewhite;
}

.create form{
    position: relative;
    width: 100px;
    margin: auto;
}
button{
    display: block;
    margin: 20px 0;
    margin-top: 5px;
    margin-left: 50px;
    position: absolute;
    text-align: center;
    background-color: skyblue;
    cursor: pointer;
    font-size: 18px;
}
input{
    display: block;
}

</style>